/*
 * @Descripttion: 
 * @version: 
 * @Author: nliu
 * @Date: 2020-09-28 10:25:32
 * @LastEditors: nliu
 * @LastEditTime: 2020-09-28 10:27:39
 */
import React, {useRef} from 'react';
import { renderingHTMLMath } from '../utils/react-mathjax';
import { Row, Col,Button } from 'antd';
import { getOptionSpan } from '../utils/question-bank';
import './TestBox.less';

let width = 0;
const TestBody = ({testDetail, index=0, flag=false, str='', attr=''}) => {
  const testBox = useRef({});
  
  const getStem =  (item, i, type) => {
    if(!item) return;
    let stem = (item.stem||'').replace('<table>', '<table border>');
    if(item.testForm === '2'){
      if(flag){
        // courseTestBlankAnwser 填空题答案列表 blankId 答案ID  anwserText 答案内容 
        (item.courseTestBlankAnwser||[]).forEach(e => {
          stem = stem.replace(`___${e.blankId}___`, `<div class="gap-anwser">${e.anwserText} </div>`)
        })
      }else{
        const reg = /___.*?___/g;
        stem = stem.replace(reg, '______');
      }
    }
    let ind = type==='all' ? `（${i+1}）` : i+1; 
    return `
      <div class="test-box-stem-div">
        <span class="test-box-stem-num">${ind?ind+'':''} </span> 
        <span style="color: gray;white-space:nowrap;"> ${type==='all'?'':str} </span> 
        <div class="test-box-stem-stem">${stem}</div>
      </div>
    `
  }
  // courseTestChooseAnwser 选择题选择列表 rightFlag 1 正确 optionName 选择题文字
  
  if(testBox){
    width = testBox.current.offsetWidth 
  }
  const choiceQuestion = list => {
    const size = width/list.length/10
    return <Row className='question-box' gutter={20}>  
      {list.map(item => (
        <Col key={item.id} span={getOptionSpan(list, size)} className={`question-box-div ${flag && item && item.rightFlag === 1?'active':''}`}>
          <span className='question-box-num'>{item.optionName}. </span>
          <span className='question-box-stem'>{renderingHTMLMath(item.memo)}</span>
        </Col>
      ))}
    </Row>
  }
  // courseTestJudgeAnwser 判断题 rightFlag 1 为正确
  const yesNo = (item={}) => <Row className='question-box' gutter={20}>
    <Col className={`${flag && item.rightFlag === 1?'active':''}`} span={6}>正确</Col>
    <Col className={`${flag && item.rightFlag === 0?'active':''}`} span={6}>错误</Col>
  </Row>
  // courseTestJudgeAnwser 判断题 rightFlag 1 为正确
  const anwserQuestion = ({courseTestEasyAnwser={},...item}=item={}) => <div className='question-box' style={{paddingLeft: 62}}>
    {flag && <div className="active">{renderingHTMLMath(courseTestEasyAnwser.anwserText)}</div>}
  </div>
  // courseTestOtherVo 综合体列表
  const allExamination = item => <div>
    {(item.courseTestOtherVo||[]).map((child, ind) => <div key={ind} className="question-box" style={{paddingBottom: 0}}>
      <div className="test-box-stem">{renderingHTMLMath(getStem(child, ind, 'all'))}</div>
      {(child.testForm === "1" || child.testForm === "3") && choiceQuestion(child.courseTestChooseAnwser || child[attr] ||[]) }
      {child.testForm === "4" && yesNo(child.courseTestJudgeAnwser || child) }
      {flag && <div className="question-box active">
        {renderingHTMLMath(child.courseTestEasyAnwser?child.courseTestEasyAnwser.anwserText:child.anwserTexts)}
      </div>}
    </div>)}
  </div>
  //  1 单选 3 多选 4 判断 5 作图 6 实验探究 7 计算 8 综合能力 9 解答题
  return (
    <div className="test-box" ref={testBox}>
        
      <div className="test-box-stem">{renderingHTMLMath(getStem(testDetail, index))}</div>
      { (testDetail.testForm === "1" || testDetail.testForm === "3") && choiceQuestion(testDetail.courseTestChooseAnwser || testDetail[attr] || []) }
      { testDetail.testForm === "4" && yesNo(testDetail.courseTestJudgeAnwser || testDetail)}
      { testDetail.testForm === '9' && anwserQuestion(testDetail) }
      { (testDetail.testForm === '8' || testDetail.testForm === '5' || testDetail.testForm === '6' || testDetail.testForm === '7') && allExamination(testDetail) }
      
    </div>
  )
}

export default TestBody;
